<template>
  <t-modal
    title="提交"
    width="1048px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="submit-modal-container"
    v-bind="footer"
    forceRender
    :confirmLoading="submitLoading"
  >
    <div class="curve-modal-body">
      <div class="drawing-list-container">
        <vxe-table
          ref="xTable"
          height="99%"
          align="left"
          show-overflow
          show-header-overflow
          border="default"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
        >
          <vxe-column type="seq" width="50" title="序号" align="center">
          </vxe-column>
          <vxe-column field="fileName" title="名称">
            <template #default="{ row }">
              <div class="table-file-name">
                <div
                  class="icon"
                  :class="[getFileIconName(row.fileName)]"
                ></div>
                <div class="name" @click="previewFile(row)">
                  {{ row.fileName }}
                </div>
              </div>
            </template>
          </vxe-column>
          <vxe-column field="person" title="批注负责人">
            <template #default="{ row,rowIndex }">
              <div class="people-container">
                <div class="people-name">
                  <a-input
                    v-model="row.person"
                    placeholder="请添加"
                    disabled
                  ></a-input>
                </div>
                <div class="add-btn">
                  <a-button
                    type="primary"
                    size="small"
                    @click="handleSelectPeople(row, rowIndex)"
                  >
                    添加
                  </a-button>
                </div>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <!-- 选择人员 -->
    <selectPeopleModal
      :visible.sync="selectPeopleModal.visible"
      :selectList="selectPeopleModal.record"
      @onConfirm="onConfirm($event)"
    ></selectPeopleModal>
    <!-- 单文件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import { getToken, downloadDfs } from "@/utils/TopVUI";
//单文件预览
import previewModal from "@/pages/document/minio/previewModal";
//提交弹窗
import selectPeopleModal from "./selectPeopleModal.vue";
import { submitDrawingReview } from "@/api/design";
import { getFileIconName } from "@/utils/util.js";
export default {
  components: {
    selectPeopleModal,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      footer: {},
      submitLoading: false,
      tableData: [],
      //选择人员
      selectPeopleModal: {
        visible: false,
        index: "",
        record: [],
      },
      //单文件预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData", "userInfo"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { fileIdInfo = [] } = this.parameter.fileIdInfo;
          this.tableData = fileIdInfo;
          this.tableData.forEach((item) => {
            this.$set(item, "selectList", []);
            this.$set(item, "person", "");
          });
        }
      },
      immediate: true,
    },
  },

  methods: {
    getFileIconName,
    onConfirm(ev = []) {
      let { index } = this.selectPeopleModal;
      let names = ev.map((item) => item.text);
      this.tableData[index].selectList = ev;
      this.tableData[index].person = names.toString();
    },

    handleSelectPeople(row, index) {
      this.selectPeopleModal.record = row.selectList;
      this.selectPeopleModal.index = index;
      this.selectPeopleModal.visible = true;
    },

    onSubmit() {
      try {
        this.tableData.forEach((item, index) => {
          if (item.selectList.length == 0) {
            throw { item, index };
          }
        });
      } catch (data) {
        return this.$message.warning(`第${data.index + 1}行批注负责人不能为空`);
      }
      let { uuid } = this.parameter;
      let list = [];
      this.tableData.forEach((item, index) => {
        list.push({ cadFileUuid: item.bimCadFile.uuid });
        let user = item.selectList.map((v) => v.uuid).toString();
        this.$set(list[index], "commentUser", user);
      });
      this.submitLoading = true;
      submitDrawingReview({ uuid, userList: list })
        .then((res) => {
          if (res.statusCode === 200 || res === 1) {
            this.$message.success("提交成功", 1.5);
            this.closeModal();
            this.$parent.getTableData();
          } else {
            this.$message.error(res?.message ?? "提交失败");
          }
        })
        .catch((_) => {
          this.$message.error(_?.message ?? "提交失败");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
    },

    //预览
    previewFile(file) {
      let { previewWay, fileName, url, uuid, unit, bimCadFile } = file;
      let domain = location.origin;
      switch (previewWay) {
        //cad预览
        case "cad":
          window.open(
            `${domain}/#/blackHole/previewCad?uuid=${uuid}&fileName=${fileName}&unit=${unit}`
          );
          break;
        // 模型预览
        case "model":
          let { bhDataSetId } = bimCadFile || {};
          bhDataSetId &&
            window.open(
              `${domain}/#/blackHole/viewDataSetSingleSimple?dataSetId=${bhDataSetId}&name=${fileName}`
            );
          break;
        // 普通文件预览
        default:
          this.previewModal.loading = true;
          this.$refs.previewModal.type = "file";
          this.$refs.previewModal.fileUrl =
            this.kkFileView +
            "/onlinePreview?url=" +
            encodeURIComponent(Base64.encode(url)) +
            "&watermarkTxt=" +
            //水印内容
            encodeURIComponent("") +
            "&token=" +
            getToken();
          this.previewModal.visible = true;
          this.previewModal.loading = false;
          break;
      }
    },

    //关闭
    closeModal() {
      this.$emit("update:visible", false);
      this.tableData = [];
      this.selectPeopleModal = {
        visible: false,
        index: "",
        record: [],
      };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.submit-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 20px;
      height: 600px;
      display: flex;
      flex-direction: column;
      .drawing-list-container {
        flex: 1;
        .people-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .people-name {
            flex: 1;
          }
          .add-btn {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
